---
title: バンドルサイズを分析する
description: '`rollup-plugin-visualizer`を使用してAstroが生成するバンドルを分析する方法を学びます。'
i18nReady: true
type: recipe
---

import { Steps } from '@astrojs/starlight/components';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

Astroが生成するバンドルの内容を理解することは、サイトのパフォーマンスを向上させるために重要です。バンドルを可視化することで、プロジェクトのどこを変更すればバンドルサイズを削減できるかのヒントを得られます。

## レシピ

[`rollup-plugin-visualizer`ライブラリ](https://github.com/btd/rollup-plugin-visualizer)を使用すると、Rollupバンドルを可視化して分析し、どのモジュールが容量を占めているかを確認できます。

<Steps>
1. `rollup-plugin-visualizer`をインストールします。
    <PackageManagerTabs>
        <Fragment slot="npm">
        ```shell
        npm install rollup-plugin-visualizer --save-dev
        ```
        </Fragment>
        <Fragment slot="pnpm">
        ```shell
        pnpm add rollup-plugin-visualizer --save-dev
        ```
        </Fragment>
        <Fragment slot="yarn">
        ```shell
        yarn add rollup-plugin-visualizer --save-dev
        ```
        </Fragment>
    </PackageManagerTabs>

2. `astro.config.mjs`ファイルにプラグインを追加します。
    ```js
    // @ts-check
    import { defineConfig } from 'astro/config';
    import { visualizer } from "rollup-plugin-visualizer";

    export default defineConfig({
      vite: {
        plugins: [visualizer({
          emitFile: true,
          filename: "stats.html",
        })]
      }
    });
    ```

3. ビルドコマンドを実行します。
    <PackageManagerTabs>
        <Fragment slot="npm">
        ```shell
        npm run build
        ```
        </Fragment>
        <Fragment slot="pnpm">
        ```shell
        pnpm build
        ```
        </Fragment>
        <Fragment slot="yarn">
        ```shell
        yarn build
        ```
        </Fragment>
    </PackageManagerTabs>

4. プロジェクトの`stats.html`ファイルを見つけます
    静的なサイトの場合、このファイルは`dist/`ディレクトリのルートにあり、バンドルに含まれる内容を確認できます。
    
    Astroプロジェクトがオンデマンドレンダリングを使用している場合、2つの`stats.html`ファイルが生成されます。1つはクライアント用、もう1つはサーバー用で、それぞれ`dist/client`と`dist/server/`ディレクトリのルートに配置されます。
    
    これらのファイルの解釈方法や特定のオプションの設定方法については、[Rollup Plugin Visualizerのドキュメント](https://github.com/btd/rollup-plugin-visualizer#how-to-use-generated-files)を参照してください。
    
</Steps>

:::note
Astro独自のハイドレーションアプローチを考慮すると、ビルドは必ずしもクライアントが受け取るバンドルを表しているわけではありません。

Rollup visualizerはサイト全体で使用されるすべての依存関係を表示しますが、ページごとのバンドルサイズの内訳は表示しません。
:::
